<template>
  <a-card :bordered="false">
    <!-- 本示例只列举了基本用法，具体详情请查看VxeTableListMixin.js -->
    <!-- 查询区域 -->
    <!-- table区域-begin -->
    <div>
      <vxe-grid
        id="VxeTableList"
        ref="vxeTable"
        v-bind="gridOptions"
        :filterConfig="{remote: true}"
        :row-config="{keyField:'dictCode'}"
        :show-footer="true"
        v-on="listeners"
        :footerData="footerData"
        @filter-change="filterChangeEvent"
      >
        <template #filter_dictName="{ column }">
          <div class="p-3">
            <a-input v-model="column.filters[0].data" @change="changeNameFilter(column.filters[0])" />
          </div>
        </template>
      </vxe-grid>
    </div>
  </a-card>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { getAction } from '@/services/manage'
export default {
  name: 'VxeTableFilterList',
  mixins: [VxeTableListMixin],
  data() {
    return {
      url: {
        list: '/sys/dict/tree/page', // 查询接口
        delete: '', // 删除接口
        deleteBatch: '' // 批量删除接
      },
      columns: [
        { type: 'checkbox', width: 40 },
        { field: 'seq', type: 'seq', width: 40 },
        {
          title: '编码',
          field: 'dictCode',
          sortable: true,
          filters: [
            { data: '' }
          ],
          filterRender: {
            name: 'AInput',
            props: {
              size: 'default'
            }
          }
        },
        {
          title: '名称',
          field: 'dictName',
          sortable: true,
          filters: [
            { data: '' }
          ],
          slots: {
            filter: 'filter_dictName'
          }
        },
        {
          title: '默认值',
          field: 'dictDefaultValue'
        },
        {
          title: '描述',
          field: 'dictDesc'
        },
        {
          title: '类别',
          field: 'dictType',
          slots: { default: ({ row }) => {
            return row.dictType === '1' ? '系统字典' : '业务字典'
          } }
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 170
        }
      ],
      dataSource: [],
      total: 100
    }
  },
  computed: {
    footerData() {
      let dictDefaultValue = 0
      this.dataSource.forEach((item, i) => {
        dictDefaultValue++
      })

      return [
        { seq: '合计', dictDefaultValue: dictDefaultValue, dictDesc: this.total }
      ]
    }
  },
  methods: {
    changeNameFilter(option) { // 更新过滤框状态
      const $grid = this.$refs.vxeTable
      if ($grid) {
        $grid.updateFilterOptionStatus(option, !!option.data)
      }
    },
    filterChangeEvent({ filterList }) { // 过滤数据
      filterList.forEach(item => {
        this.queryParam[item.field] = item.datas[0]
      })
      this.loadData()
    },
    async loadTableData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      let params = this.getQueryParams()// 查询条件
      this.loading = true
      let res = await getAction(this.url.list, params)
      if (res.success && !res.result.first && res.result.last && res.result.content.length === 0) { // 当最后一页无数据时，重新请求
        this.ipagination.currentPage = 1
        params = this.getQueryParams()// 查询条件
        res = await getAction(this.url.list, params)
      }
      this.loading = false
      this.dataSource = res.result.content
      return res
    },
    getTotal() { // 服务器合计
      setTimeout(() => {
        this.total = 1000
        // 需要异步执行
        setTimeout(() => {
          this.$refs.vxeTable.updateFooter()
        }, 1000)
      }, 5000)
    },
    footerMethod() {
      return [[{ seq: '合计', dictDefaultValue: 100, dictDesc: 200 }]]
    }
  },
  mounted() {
    this.getTotal()
  }
}
</script>

